<template>
   
    <div class="app-container">
        <el-tabs v-model="activeTab" @tab-click="tabClick" tab-position="top" style="height: 200px" class="wrap-tabs">
            <el-tab-pane :label="route.meta.title" :key="route.path" v-for="route in sidebarRouters">
              <!-- {{ route.path }} -->
                <Dept :deptType="route.query" v-if="activeTab==route.tabIndex&&route.path=='dept'"></Dept>
                <Hospital :deptType="route.query" v-if="activeTab==route.tabIndex&&route.path=='hospital'"></Hospital>
                <Hospitalarea :deptType="route.query" v-if="activeTab==route.tabIndex&&route.path=='hospitalarea'"></Hospitalarea>
                <Hospitalsection :deptType="route.query" v-if="activeTab==route.tabIndex&&route.path=='hospitalsection'"></Hospitalsection>
                <Hospitalroom :deptType="route.query" v-if="activeTab==route.tabIndex&&route.path=='hospitalroom'"></Hospitalroom>
                <User v-if="(activeTab==route.tabIndex)&&(route.path=='user')"></User>
                <Dict v-if="(activeTab==route.tabIndex)&&(route.path=='dict')"></Dict>
                <Menu v-if="(activeTab==route.tabIndex)&&(route.path=='menu')"></Menu>
                <Notice v-if="(activeTab==route.tabIndex)&&(route.path=='notice')"></Notice>
                <Role v-if="(activeTab==route.tabIndex)&&(route.path=='role')"></Role>
                <Dict v-if="(activeTab==route.tabIndex)&&(route.path=='dict')"></Dict>
                <Sickarea v-if="(activeTab==route.tabIndex)&&(route.path=='sickarea')"></Sickarea>
                <Badeventsurgery v-if="(activeTab==route.tabIndex)&&(route.path=='badeventsurgery')"></Badeventsurgery>
                <Eventmanage v-if="(activeTab==route.tabIndex)&&(route.path=='eventmanage')"></Eventmanage>
                <Icdmanage v-if="(activeTab==route.tabIndex)&&(route.path=='icdmanage')"></Icdmanage>
                <Sickperson v-if="(activeTab==route.tabIndex)&&(route.path=='sickperson')"></Sickperson>
                <Anesthesiamethod v-if="(activeTab==route.tabIndex)&&(route.path=='anesthesiamethod')"></Anesthesiamethod>
                <Operlog v-if="(activeTab==route.tabIndex)&&(route.path=='operlog')"></Operlog>
                <Logininfor v-if="(activeTab==route.tabIndex)&&(route.path=='logininfor')"></Logininfor>
                <Devicemanage v-if="(activeTab==route.tabIndex)&&(route.path=='devicemanage')"></Devicemanage>
                <Gen v-if="(activeTab==route.tabIndex)&&(route.path=='gen')"></Gen>
                <Devicepackage v-if="(activeTab==route.tabIndex)&&(route.path=='devicepackage')"></Devicepackage>
                <Post v-if="(activeTab==route.tabIndex)&&(route.path=='post')"></Post>
                <Config v-if="(activeTab==route.tabIndex)&&(route.path=='config')"></Config>
                <Formsetting v-if="(activeTab==route.tabIndex)&&(route.path=='formsetting')"></Formsetting>
            </el-tab-pane>
        </el-tabs>
    </div>
   
  </template>
  
  <script  setup>
    import { ref } from 'vue'
    import Dept from './dept/index.vue'
    import Hospital from './dept/index.vue'
    import Hospitalarea from './dept/index.vue'
    import Hospitalsection from './dept/index.vue'
    import Hospitalroom from './dept/index.vue'
    import Menu from './menu/index.vue'
    import Notice from './notice/index.vue'
    import Role from './role/index.vue'
    import Post from './post/index.vue'
    import Config from './config/index.vue'
    import User from './user/index.vue'
    import Dict from './dict/index.vue'
    import Sickarea from '../manage/sickarea/index.vue'
    import Badevent from '../manage/badevent/index.vue'
    import Devicemanage from '../manage/devicemanage/index.vue'
    import Badeventsurgery from '../manage/badeventsurgery/index.vue'
    import Eventmanage from '../manage/eventmanage/index.vue'
    import Icdmanage from '../manage/icdmanage/index.vue'
    import Sickperson from '../manage/sickperson/index.vue'
    import Formsetting from '../manage/formsetting/index.vue'
    import Anesthesiamethod from '../manage/anesthesiamethod/index.vue'
    import Operlog from '../monitor/operlog/index.vue'
    import Logininfor from '../monitor/logininfor/index.vue'
    import Gen from '../tool/gen/index.vue'
    import Devicepackage from '../manage/devicepackage/index.vue'
    import usePermissionStore from '@/store/modules/permission'
    const permissionStore = usePermissionStore()
    const sidebarRouters = computed(() => {
        let routes=permissionStore.sidebarRouters.filter(path=>{
        return path.path=='/system'
        })[0].children
       
        let children=[];
        for(let i=0;i<routes.length;i++){
            if(routes[i].children){
                children=children.concat(routes[i].children)
            }
            
        }
        routes=routes.concat(children)
        routes=routes.map((item,index)=>{
            item.tabIndex=index
            return item
        })
        return routes;

    });

    

    let activeTab=ref('0');
    let settingTab=sessionStorage.getItem('setting-tab');
    activeTab.value=settingTab?settingTab:'0';
    /***点击标签****/
    function tabClick(tab){
    activeTab.value=tab.paneName;
     sessionStorage.setItem('setting-tab',tab.paneName)
    }
  </script>
  
  <style lang="scss" scoped>
  .app-container{
    background:#fff;
    height:100%;
  }
  .wrap-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  
  .el-tabs--right .el-tabs__content,
  .el-tabs--left .el-tabs__content {
    height: 100%;
  }
  </style>
  